<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章列表</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="/hmp/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/hmp/css/animate.css" rel="stylesheet">
<link href="/hmp/css/style.css?v=4.1.0" rel="stylesheet">
<link href="/hmp/layui/layui/css/layui.css" rel="stylesheet">
<link href="/hmp/editor.md-master/css/editormd.css" rel="stylesheet">

</head>
<body class="gray-bg">
	<!--第一层  数据展示 -->
	<div class="wrapper wrapper-content animated fadeInRight">
		<!-- Panel Other -->
		<div class="ibox float-e-margins">
			<div class="ibox-content">
				<div class="row row-lg">
					<!-- Example Events -->
					<div class="example-wrap">
						<div class="example">
							<div class="demoTable">
							<div class="layui-form" >
								文章标题:
								<div class="layui-inline">
									<input class="layui-input" name="activeTitle" id="activeTitle"
										autocomplete="off"  placeholder="请输入文章标题">
								</div>
								 文章类型:
								   <div class="layui-inline" style="width:100px;">
								      <select name="activeType"  id="activeType" lay-verify="required" >
								        <option value=""></option>
								        
								      </select>
								    </div>
								 文章标签:
								<div class="layui-inline" style="width:120px;">
									<input class="layui-input" name="activeTag" id="activeTag"
										autocomplete="off" placeholder="请输入文章标题">
								 </div>
								日期范围:
								<div class="layui-inline"  >
									 <input class="layui-input" name="activeTime" id="activeTime"    placeholder="yyyy-MM-dd" type="text">
								 </div>
							 
								<button class="layui-btn" data-type="reload">搜索</button>
								<button class="layui-btn" data-type="reloadClean">清空</button>
								</div>
							</div>

							<table class="layui-hide" id="activeListTbale"
								lay-filter="active"></table>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="wrapper wrapper-content animated fadeInRight"
		id="restShowDlg" style="display: none;">
		<div class="row">
			<div id="mdShow">
				<textarea name="editormd-markdown-doc" id="mdText"></textarea>
			</div>
		</div>
	</div>
	
	
</body>

<!-- 全局js -->
<script src="/hmp/js/jquery.min.js"></script>
<script src="/hmp/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="/hmp/js/content.js?v=1.0.0"></script>
<script src="/hmp/layui/layui/layui.js"></script>
<script src="/hmp/editor.md-master/editormd.min.js"></script>
<script src="/hmp/editor.md-master/lib/prettify.min.js"></script>
<script src="/hmp/editor.md-master/lib/raphael.min.js"></script>
<script src="/hmp/editor.md-master/lib/underscore.min.js"></script>
<script src="/hmp/editor.md-master/lib/sequence-diagram.min.js"></script>
<script src="/hmp/editor.md-master/lib/flowchart.min.js"></script>
<script src="/hmp/editor.md-master/lib/jquery.flowchart.min.js"></script>
<script src="/hmp/editor.md-master/lib/marked.min.js"></script>
<script>
	var table;

	layui.use(['table','form','laydate','layer'], function() {
		  table = layui.table;
		  var form = layui.form,
		  laydate = layui.laydate,
		  layer=layui.layer;
		  
		  //常规用法
		  laydate.render({
		    elem: '#activeTime'
		    ,range: true
		  });
		  
		var tableIns = table.render({
			elem : '#activeListTbale',
			url : '/active/list/',
			id: 'testReload',
			cols : [ [ {
				type : 'checkbox',
				fixed : 'left'
			}, {
				field : 'activeId',
				width : 80,
				title : 'ID',
				sort : true,
				fixed : 'left'
			}, {
				field : 'title',
				title : '文章标题',
				minWidth : 150,
				fixed : 'left'
			}, {
				field : 'typeName',
				width : 80,
				title : '类型',
				sort : true
			}, {
				field : 'tag',
				width : 80,
				title : '标签',
				sort : true
			}, {
				field : 'visits',
				width : 80,
				title : '阅读量',
				sort : true
			}, {
				field : 'state',
				width : 80,
				title : '状态',
				templet: '#stateTpl'
			}, {
				field : 'username',
				width : 120,
				title : '作者'
			}, {
				field : 'createTime',
				width : 180,
				title : '创建时间',
				sort : true
			}, {
				field : 'updateTime',
				width : 180,
				title : '修改时间',
				sort : true
			}, {
				fixed : 'right',
				width : 180,
				title : '操作',
				toolbar : '#barDemo'
			} ] ]
		  ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
		      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
		      //,curr: 5 //设定初始在第 5 页
		      ,groups: 5 //只显示 1 个连续页码
		      ,first: false  //不显示首页
		      ,last: false //不显示尾页
	      	  ,limit : 10  //每页显示的条数
	      	  ,page : 1   //第几页 
	      	  ,limits : [10,30,60]
	   		
		   }
		
		});

		//监听表格复选框选择
		table.on('checkbox(active)', function(obj) {
			console.log(obj)
		});
		//监听工具条
		table.on('tool(active)', function(obj) {
			var data = obj.data;
			if (obj.event === 'detail') {

				layer.open({
					type : 2,
					title : [ '查看文章', 'font-size:18px;' ],
					shadeClose : true,
					area : [ '800px', '500px' ],
					offset : [ '50px', '230px' ],
					content : 'active/showMdText/' + data.activeId
				});

			} else if (obj.event === 'del') {
				layer.confirm('真的删除行么', function(index) {
					//修改 
					$.ajax({
						type : "get",
						url : "/active/updateState/"+ data.activeId,
					    async: false,  //加了这个属性，
					    error : function(request) {
					    		layer.confirm("网络错误!");
							}, 
						success : function(data) {
								
							if(data.code==200)
							{
								layer.msg(data.msg);
								table.reload('testReload');
								layer.close(index);
							}else
							{
								layer.confirm(data.msg);
							}
							 
						 }
					});
			
				});
			} else if (obj.event === 'edit') {

				layer.open({
					type : 2,
					title : [ '修改文章', 'font-size:18px;' ],
					shadeClose : true,
					maxmin : true,
					area : [ '800px', '500px' ],
					offset : [ '50px', '230px' ],
					content : 'active/updateActive/' + data.activeId
				});

			}
		});
		
	
		
		var $ = layui.$, active = {
			reload : function() {
				
				  var activeTitle = $('#activeTitle').val();
				  var activeType = $('#activeType').val();
				  var activeTag = $('#activeTag').val();
				  var activeTime = $('#activeTime').val();
				
				//执行重载
				table.reload('testReload', {
					page : {
						curr: 1 //重新从第 1 页开始
					},
					where : {
							type : activeType,
							title : activeTitle,	
							tag   : activeTag,
							createTime : activeTime
					}
				});
			}
			,
			reloadClean:function()
			{
				 $('#activeTitle').val('');
				 $('#activeType').val("");
				 $('#activeTag').val('');
				 $('#activeTime').val('');
				 $("#selectedvalue").val('');
				form.render('select');//重新加载select 
				table.reload('testReload');
			}
		};
		
		
		 $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');//获取reload
		    active[type] ? active[type].call(this) : '';
		  });
	 
	});
	
</script>


<script>
		
		$(function(){
			
			 $.ajax({
			    	type : "POST",
			    	url : "/activeType/selectAll",
			    	//data :"",
			    	 async: false,  //加了这个属性，
			    	error : function(request) {
						laryer.alert("网络错误!");
					}, 
					success : function(data) {
						
						if (data.code ==200) {
							//拼接 html   
							var tag=data.data;
							var html='';
							html+='<option value=""></option>';
							for(var i=0;i<tag.length;i++)
							{
								html+='<option value='+tag[i].activeTypeId+'>'+tag[i].typeName+'</option>';
							 }
							
							$("#activeType").html(html);
						} else {
							laryer.alert("标签查询失败,请联系管理员")
						}
					}

			    });
		});
		
</script>



<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="stateTpl">

  {{#  if(d.state === 1){ }}
    	<span class="label label-danger">发布</span>
  {{#  } else { }}
		 <span class="label label-primary">未发布</span>
  {{#  } }}
	
</script>

</html>
